<template>
	<!-- 店铺 -->
	<view class="page_view">
		<image :src="baseUrl.cdnurl+info.avatar?baseUrl.cdnurl+info.avatar:'/static/images/home/Maskgroup@2x.png'" class="w-1 grent"></image>
		<!-- 自定义导航栏 -->
		<view class="w-1 mynav">
			<view class="status_bar"></view>
			<view class="w-1 p-r-20 fr-b-c m-t-30" style="height: 44px; overflow: hidden;">
				<u-icon name="arrow-left" class="arrow-left" @tap="goback"></u-icon>
				<view class="fr-s-c seach">
					<u-icon name="search" class="search_icon"></u-icon>
					<input type="text" class="search_input" v-model="searchval" @input="searchlist"  placeholder="搜索本店商品">
				</view>
				<!-- <image src="/static/images/home/Right@2x.png" class="Right2" mode=""></image> -->
			</view>
		</view>
		<view class="merchant_info">
			<view class="merchant_info_view">
				<view class="merchant_info_view_left">
					<image :src="baseUrl.cdnurl+info.avatar" mode=""></image>
				</view>
				<view class="merchant_info_title">
					{{info.shopname}}
				</view>
			</view>
			<view class="merchant_info_tab">
				<!-- {{info.bio}} -->
				<view class="" v-for="(item,index) in coupon">
					<view class="merchant_info_tab_item" v-if="item.type == 'reduction' || (item.type == 'vip' && item.usertype == 'reduction')">
						满{{Number(item.limit)}}元减{{Number(item.price)}}元
					</view>
					<view class="merchant_info_tab_item" v-if="item.type == 'discount' || (item.type == 'vip' && item.usertype == 'discount')">
						满{{Number(item.limit)}}元减{{Number(item.price)}}元
					</view>
				</view>
			</view>
		</view>
		<view class="lits_veiw">
			<view class="lits_veiw_tap">
				<view class="tabs">
					<view :class="['tabs_item',current==index?'active':'']" v-for="(item,index) in info.category" @tap="choose_tabs(index)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="list_scroll">
				<view class="list_scroll_item" v-for="(item,index) in list"  @click="toDetail(item.id,item.platform,item.c_father_goods_id)">
					<!-- baseUrl.cdnurl+ -->
					<image :src="item.image"  class="list_scroll_item_img" mode=""></image>
					<view class="list_scroll_item_bottom">
						<view class="list_scroll_item_title text-line-2">
							{{item.title}}
						</view>
						<view class="list_scroll_item_bottom_flex">
							<view class="list_scroll_item_bottom_flex_left">
								¥ <text class="list_scroll_item_bottom_flex_left_num">{{item.price}}</text> 
							</view>
							<view class="list_scroll_item_bottom_flex_right">
								<!-- ¥599.00 -->
								<!-- 这个是划线价 -->
							</view>
						</view>
						<view class="buhuigou animated11 rubberBand11"  v-if="item.is_hg == 2">
							此商品可原价回购
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/utils/base.js';
	export default {
		data() {
			return {
				list: [
					{
						name:'全部'
					},{
					 
						name:'手机'
					 },{
					 
						name:'母婴'
					 },{
					 
						name:'汽车用品'
					 }
				 ],
				current: 0,
				searchval:'',
				page:1,
				shoop_id:'',
				baseUrl:config,
				count:'',
				info:'',
				timer:null,
				bgimg:'',
				coupon:[],
				
			}
		},
		onReachBottom() {
			if(this.list.length<this.count){
				this.page++
				this.getList()
			}
		},
		onLoad(options) {
			if(options.shoop_id){
				this.shoop_id = options.shoop_id
			}
			this.getShopInfo()
			this.getStoreCoupon()
			
		},
		methods: {
			// 去商品详情
			toDetail(id,platform,c_father_goods_id) {
				if(!uni.getStorageSync('user_id')){
					uni.navigateTo({
						url:"/pages/Login/Login"
					})
					return
				}
				
				let c_father = c_father_goods_id||0
				uni.navigateTo({
					url: '/pages/Home/GoodsDetail/GoodsDetail?id=' + id+'&platform='+platform+'&c_father_goods_id='+c_father
				})
			},
			change(e){
				this.current = e
				console.log(this.current)
				this.getList()
			},
			goback(){
				uni.navigateBack()
			},
			searchlist(e){
				if(this.timer) clearTimeout(this.timer)
				this.timer = setTimeout(()=>{
					this.getList()
				})
			},
			getShopInfo(){
				let that = this
				that.$get({
					url:'/wanlshop/shop/getShopInfo',
					data:{
						id:that.shoop_id
					}
				}).then(res=>{
					console.log(res)
					that.info = res.data
					that.getList()
				}).catch(err=>{
					
				})
			},
			getStoreCoupon(){
				let t = this
				this.$get({
					url:'/wanlshop/coupon/getStoreCoupon',
					data:{
						shop_id:Number(this.shoop_id)
					}
				}).then(res=>{
					console.log(res)
					if(res.code == 1){
						t.coupon = res.data.data
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			// 获取商品列表
			getList(){
				let data = {
					shop_id: Number(this.shoop_id) ,
					shop_category_id:this.info.category[this.current].id
				}
				this.$get({
					url:'/wanlshop/product/lists',
					data:{
						search:this.searchval,
						sort:'weigh',
						order:'asc',
						page:this.page,
						filter:JSON.stringify(data),
						op:{
							"shop_id":"in",
							"shop_category_id":"FIND_IN_SET"
						},
					}
				}).then(res=>{
					this.list = this.page==1?res.data.data:[...this.list,...res.data.data]
					this.nodata = !this.list.length
					this.count = res.data.total
				}).catch(err=>{
					this.list = []
					this.nodata = !this.list.length
					this.count = 0
				})
			},
			choose_tabs(index){
				this.current = index
				this.getList()
			}
			// get_info(){
			// 	let data = {
			// 		shop_id: Number(this.shoop_id) 
			// 	}
			// 	this.$get({
			// 		url:'/wanlshop/product/lists',
			// 		data:{
			// 			search:this.searchval,
			// 			sort:'weigh',
			// 			order:'asc',
			// 			page:this.page,
			// 			filter:JSON.stringify(data),
			// 			op:{"shop_id":"in"},
			// 		}
			// 	}).then(res=>{
			// 		console.log(res)
					
			// 	})
			// },
		}
	}
</script>

<style scoped>
	page {
		background-color: #F4F4F4;
	}
	.seach {
		width: 596rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
	}

	.mynav {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		overflow: hidden;
	}

	.grent {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 302rpx;

	}

	.seach {
		padding: 0 12rpx;
		box-sizing: border-box;
	}

	.search_icon {
		width: 28rpx;
		height: 28rpx;
	}

	.search_input::placeholder {
		color: #999999;
	}

	.arrow-left {
		font-size: 48rpx;
		color: #fff;
	}

	.search_input {
		width: 86%;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
		padding-left: 12rpx;
	}

	.Right2 {
		width: 48rpx;
		height: 48rpx;
	}

	.merchant_info {
		width: 100%;
		height: 298rpx;
		background-color: #fff;
		/* border: #333333 solid 2rpx; */
		padding-top: 302rpx;
		padding-bottom: 302rpx;
	}

	.merchant_info_view {
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
		display: flex;

	}

	.merchant_info_view_left {
		width: 176rpx;
		height: 176rpx;
		border-radius: 50%;
		background-color: #fff;
		padding: 10rpx;
		box-sizing: border-box;
		margin-top: -76rpx;
		position: relative;
		z-index: 99;
	}

	.merchant_info_view_left image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.merchant_info_title {
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #240F05;
		margin-left: 26rpx;
		line-height: 100rpx;
	}

	.merchant_info_tab {
		width: 100%;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		margin-top: 42rpx;
		flex-wrap: wrap;
	}

	.merchant_info_tab_item {
		display: inline-block;
		height: 36rpx;
		padding: 0 10rpx;
		line-height: 36rpx;
		border: #EC6E31 solid 2rpx;
		border-radius: 4rpx;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
		font-weight: 400;
		color: #EC6E31;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.lits_veiw {
		width: 100%;
		height: 69vh;
		background-color: #F4F4F4;
		border-radius: 24rpx 24rpx 0 0;
		position: fixed;
		top: 520rpx;
	}

	.lits_veiw_tap {
		margin-top: 30rpx;
	}
	.list_scroll{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		overflow-y: auto;
		padding: 0 32rpx;
		box-sizing: border-box;
		flex-wrap: wrap;
		padding-bottom:200rpx ;
	}
	.list_scroll_item{
		width: 330rpx;
		height: 506rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		border: 2rpx solid #F4F4F4;
		margin-top: 30rpx;
	}
	.list_scroll_item_img{
		width: 330rpx;
		height: 300rpx;
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		background-color: #999999;
	}
	.list_scroll_item_title{
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #000000;
		height: 72rpx;
		margin-top: 10rpx;
	}
	.list_scroll_item_bottom{
		padding: 0 12rpx;
	}
	.list_scroll_item_bottom_flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 12rpx;
	}
	.list_scroll_item_bottom_flex_left{
		font-size: 20rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #E42D1D;
	}
	.list_scroll_item_bottom_flex_left_num{
		font-size: 34rpx;
	}
	.list_scroll_item_bottom_flex_right{
		font-size: 22rpx;
		font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #999999;
		text-decoration: line-through;
	}
	.buhuigou{
		font-size: 22rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #E56D31;
		margin-top: 8rpx;
	}
	.tabs{
		width:680rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		overflow-x: scroll;
		margin: 0 auto;
		 white-space: nowrap;
	}
	.tabs_item:first-child{
		margin-left: 0;
	
	}
	.tabs_item{
		margin: 0 34rpx;
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
		font-weight: 400;
		color: #666666;
		display: inline-block;
	}
	.active{
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #240F05;
	}
	@-webkit-keyframes rubberBand11 {
		from {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	
		30% {
			-webkit-transform: scale3d(1.25, 0.75, 1);
			transform: scale3d(1.25, 0.75, 1);
		}
	
		40% {
			-webkit-transform: scale3d(0.75, 1.25, 1);
			transform: scale3d(0.75, 1.25, 1);
		}
	
		50% {
			-webkit-transform: scale3d(1.15, 0.85, 1);
			transform: scale3d(1.15, 0.85, 1);
		}
	
		65% {
			-webkit-transform: scale3d(0.95, 1.05, 1);
			transform: scale3d(0.95, 1.05, 1);
		}
	
		75% {
			-webkit-transform: scale3d(1.05, 0.95, 1);
			transform: scale3d(1.05, 0.95, 1);
		}
	
		to {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	}
	
	
	
	.rubberBand11 {
		-webkit-animation-name: rubberBand11;
		animation-name: rubberBand11;
	}
	
	.animated11 {
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
	}
</style>